<!DOCTYPE html>
<html lang="en">
<head>
<title>可拖动的弹性大树摇摆动画</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="js/verlet-1.0.0.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/colpick.js"></script>
	<script src="js/plugin.js"></script>
	<link rel="stylesheet" href="css/colpick.css" type="text/css" />
	<link href="css/canvas.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header id="header">趣味小树</header>
<section id="content">
	<!--工具区域-->
	<ul id="tool">
		<li>
			<h3>图像</h3>
			<ul id="image">
				<li id="saveimg">
					<form action="http://localhost/down.php" id="myform" name="data" method="post">
						<input type="hidden" id="data" value="">
						<button onclick="saveimg()">保存图片</button>
						</input>
					</form>
				</li>
				<li id="clearimg" ><button onclick="clearimg()">清空画板</button></li>
				<li id="tree"><a href="index.html"><button>返回画图板</button></a></li>
			</ul>
		</li>
		<li>
			<h3>工具</h3>
			<ul id="means">

				<li id="means_brush" onclick="drawBrush(0)">
					<img src="images/pen.cur" alt="铅笔" title="铅笔">
				</li>
				<li id="means_pen" onclick="drawPen(1)">
					<img src="images/paintbrush.cur" alt="笔刷" title="笔刷">
				</li>
				<li id="means_temp1" onclick="drawtemp1(2)"></li>
				<li id="means_eraser" onclick="drawEraser(3)">
					<img src="images/rubber.cur" alt="橡皮擦" title="橡皮擦">
				</li>
				<li id="means_paint" onclick="drawPaint(4)">
					<img src="images/paintcan.cur" alt="油漆桶" title="油漆桶">
				</li>
				<li id="means_straw" onclick="drawStraw(5)">
					<img src="images/pipette.cur" alt="吸管工具" title="吸管工具">
				</li>
				<li id="means_text" onclick="drawText(6)">
					<img src="images/word.png" alt="文字工具" title="文字工具">
				</li>
				<li id="means_magnifier" onclick="drawMagnifier(7)">
					<img src="images/zoom_in.cur" alt="放大" title="放大">
				</li>
				<li id="means_drawSuoxiao" onclick="drawSuoxiao(8)" >
					<img src="images/zoom_out.cur" alt="缩小" title="缩小">
				</li>

			</ul>
		</li>
		<li>
			<h3>形状</h3>
			<ul id="shape">
				<li id="shape_line" onclick="drawLine(9)">
					<img src="images/line.png" alt="直线" title="直线">
				</li>


				<li  id="shape_hexagon" onclick="drawHexagon(10)">
					<img src="images/hexagon.png" alt="六边形" title="六边形">
				</li>
				<li id="shape_star" onclick="drawStar(11)">
					<img src="images/star.png" alt="五角星" title="五角星">
				</li>
				<li id="shape_arc" onclick="drawArc(12)">
					<img src="images/circle.png" alt="圆形" title="圆形">
				</li>
				<li id="shape_rect" onclick="drawRect(13)">
					<img src="images/rect.png" alt="矩形" title="矩形">
				</li>
				<li id="shape_poly" onclick="drawPoly(14)">
					<img src="images/triangle.png" alt="三角形" title="三角形">
				</li>
				<li id="shape_arcfill" onclick="drawArcFill(15)">
					<img src="images/fcircle.png" alt="实心圆" title="实心圆">
				</li>
				<li id="shape_rectfill" onclick="drawRectFill(16)">
					<img src="images/frect.png" alt="实心矩形" title="实心矩形">
				</li>
				<li id="shape_trianglefill" onclick="drawTrianglefill(17)">
					<img src="images/trianglefill.png" alt="实心三角形" title="实心三角形">
				</li>


			</ul>
		</li>
		<li>
			<h3>线宽</h3>
			<ul id="size">
				<li id="width_1" onclick="setLineWidth(0)">
					<img src="images/size1.png" alt="线宽1px" title="1px">
				</li>
				<li id="width_3" onclick="setLineWidth(1)">
					<img src="images/size2.png" alt="线宽3px" title="3px">
				</li>
				<li id="width_5" onclick="setLineWidth(2)">
					<img src="images/size3.png" alt="线宽5px" title="5px">
				</li>
				<li id="width_8" onclick="setLineWidth(3)" >
					<img src="images/size4.png" alt="线宽8px" title="8px">
				</li>
			</ul>
		</li>
		<li>
			<h3>颜色</h3>
			<ul id="color">
				<li id="red" onclick="setColor(this,0)"></li>
				<li id="green" onclick="setColor(this,1)"></li>
				<li id="blue" onclick="setColor(this,2)"></li>
				<li id="yellow" onclick="setColor(this,3)"></li>
				<li id="white" onclick="setColor(this,4)"></li>
				<li id="black" onclick="setColor(this,5)"></li>
				<li id="pink" onclick="setColor(this,6)"></li>
				<li id="purple" onclick="setColor(this,7)"></li>
				<li id="cyan" onclick="setColor(this,8)"></li>
				<li id="orange" onclick="setColor(this,9)"></li>
			</ul>
			<input type="text" id="picker"></input>
		</li>
	</ul>
	<script src="js/canvas.js"></script>
	<div style="text-align:center;clear:both;">
		<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
		<script src="/follow.js" type="text/javascript"></script>
		<canvas id="scratch" style="width: 890px; height: 500px;text-align: center"></canvas>
	</div>
	<!--绘图区域-->
	<!--<canvas id="canvas" width="890" height="400">-->
		<!--您的浏览器不支持canvas标签，请升级浏览器-->
	<!--</canvas>-->
	<!--请在canvas标签之后连入JS文件--->

</section>


<script type="text/javascript">

	function lerp(a, b, p) {
		return (b - a) * p + a;
	}

	VerletJS.prototype.tree = function (origin, depth, branchLength, segmentCoef, theta) {

		var lineCoef = 0.7;
		this.origin = origin;
		this.base = new Particle(origin);
		this.root = new Particle(origin.add(new Vec2(0, 10)));


		var composite = new this.Composite();
		composite.particles.push(this.base);
		composite.particles.push(this.root);
		composite.pin(0);
		composite.pin(1);


		var branch = function (parent, i, nMax, coef, normal) {
			var particle = new Particle(parent.pos.add(normal.scale(branchLength * coef)));
			composite.particles.push(particle);

			var dc = new DistanceConstraint(parent, particle, lineCoef);
			dc.p = i / nMax; // a hint for drawing
			composite.constraints.push(dc);

			particle.leaf = !(i < nMax);

			if (i < nMax) {
				var a = branch(particle, i + 1, nMax, coef * coef, normal.rotate(new Vec2(0, 0), -theta));
				var b = branch(particle, i + 1, nMax, coef * coef, normal.rotate(new Vec2(0, 0), theta));


				var jointStrength = lerp(0.7, 0, i / nMax);
				composite.constraints.push(new AngleConstraint(parent, particle, a, jointStrength));
				composite.constraints.push(new AngleConstraint(parent, particle, b, jointStrength));
			}

			return particle;
		}

		var firstBranch = branch(this.base, 0, depth, segmentCoef, new Vec2(0, -1));

		composite.constraints.push(new AngleConstraint(this.root, this.base, firstBranch, 1));

		// animates the tree at the beginning
		var noise = 10;
		var i;
		for (i = 0; i < composite.particles.length; ++i)
			composite.particles[i].pos.mutableAdd(new Vec2(Math.floor(Math.random() * noise, Math.floor(Math.random() * noise))));

		this.composites.push(composite);
		return composite;
	}

	window.onload = function () {
		var canvas = document.getElementById("scratch");

		// canvas dimensions
		var width = parseInt(canvas.style.width);
		var height = parseInt(canvas.style.height);

		// retina
		var dpr = window.devicePixelRatio || 1;
		canvas.width = width * dpr;
		canvas.height = height * dpr;
		canvas.getContext("2d").scale(dpr, dpr);

		// simulation
		var sim = new VerletJS(width, height, canvas);
		sim.gravity = new Vec2(0, 0);
		sim.friction = 0.98;

		// entities
		var tree1 = sim.tree(new Vec2(width / 4, height - 120), 5, 70, 0.95, (Math.PI / 2) / 3);
		var tree2 = sim.tree(new Vec2(width - width / 4, height - 120), 5, 70, 0.95, (Math.PI / 2) / 3);

		tree2.drawParticles = function (ctx, composite) {
			var i;
			for (i = 0; i < composite.particles.length; ++i) {
				var particle = composite.particles[i];
				if (particle.leaf) {

					ctx.beginPath();
					ctx.arc(particle.pos.x, particle.pos.y, 25, 0, 2 * Math.PI);
					ctx.fillStyle = "#679d7c";
					ctx.fill();
				}
			}
		}

		tree2.drawConstraints = function (ctx, composite) {
			var i;

			ctx.save();
			ctx.strokeStyle = "#543324";
			ctx.lineCap = "round";

			for (i = 0; i < composite.constraints.length; ++i) {
				var constraint = composite.constraints[i];
				if (!(constraint instanceof DistanceConstraint && typeof constraint.p != "undefined"))
					continue;

				ctx.beginPath();
				ctx.moveTo(constraint.a.pos.x, constraint.a.pos.y);
				ctx.lineTo(constraint.b.pos.x, constraint.b.pos.y);
				ctx.lineWidth = lerp(10, 2, constraint.p);
				ctx.stroke();
			}

			ctx.restore();
		}


		// animation loop
		var loop = function () {
			sim.frame(16);
			sim.draw();
			requestAnimFrame(loop);
		};

		loop();
	};


</script>
<footer id="footer">
	<small>版权归福大14数媒yuanyuan所有@ fzu</small>
</footer>
</body>
</html>